<style>
.paychannel {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 42px;
    line-height: 40px;
    border: 1px solid #eee;
    margin: 5px;
    cursor: pointer;
}
.paychannel img {
	height:30px;
	margin-left:5px;
}
.paychannel.selected {
    border: 2px solid #e4393c;
    line-height: 38px;

}
.paychannel.selected img {
    margin-left:4px;
}
.paychannel i {
    position: absolute;
    width: 10px;
    height: 10px;
    font-size: 0;
    line-height: 0;
    right: 0px;
    bottom: 0px;
    background: url('__IMG__/sys_item_selected.gif') no-repeat right bottom;
    z-index: 99;
    display: none;
}
.paychannel.selected i {
    display: block;
}
</style>
<volist name="payChannel" id="channel">
	<span class="paychannel" data-toggle="paychannel">
		<input type="hidden" name="channel" value="{$channel.name}">
		<img src="__IMG__/{$channel.icon}" />
		<span>{$channel.stitle}</span>
		<i></i>
	</span>
</volist>
<script>
+ function($) {
    'use strict';
    // 支付选择
    // ===============================
    var payChannel = function() {
		this.init('payChannel');
    }
    payChannel.prototype.init = function(type) {
    	$('.paychannel').on('click', function() {
	    	$(".paychannel").removeClass("selected");
			$(this).addClass("selected");
		});
		$(".paychannel:first").trigger("click");//执行一次支付方式选择点击
    }

    payChannel.prototype.channelName = function() {
     	//获取支付方式
     	return $('[data-toggle="paychannel"].selected').find('input').val();
     }

    $.fn.payChannel = new payChannel();

}(jQuery);

//$.fn.payChannel.channelName();
</script>